
tpFuncion = '';

cfgCatalogViewUi = Ext.extend(Ext.form.FormPanel, {

	region: 'center',
	autoScroll: true,
	style: 'overflow-x: hidden;',
	height: 460,
	id: 'cfgCatStep',
	header: true,
	title: '',
	frame: true,
	border: false,
	defaultType: 'textfield',
    initComponent: function(arguments) {

        this.items = [
			{
				xtype: 'tbspacer',
				height: 10
			},
            {
            	xtype: 'container',
            	layout: 'column',
            	items:[
	            	{
	            		xtype: 'fieldset',
	            		width: 400,
				    	style: 'padding: 10px',
				    	title: '-',
						seqConf: '',
						stepsConf: {},
						isAnidate: false,
						border: true,
	            		id:'stepsFs',
	            		layout: 'form',
						defaultType: 'label',
	            		listeners:{
							'titlechange':function (a,b){
								for(var i = 0 ; i < a.stepsConf.length ; i ++){
									var str = a.stepsConf[i].nb_catalogo;
									var obj = new Object();
									if(i == actualStep){
										obj.html = '<div style="height: 35px; padding-top: 15px; width: 300px;' +
												'background: url(\'/agvWeb/images/large_arrow.png\'); background-position: center; ' +
												'background-repeat: no-repeat;">' +
													'<img src="/agvWeb/ext/images/icons/fam/bullet_go.png" style="vertical-align:middle;"/>' +
														'<font style="font-size: 14px;' +
														' padding-left:5px;">' +
														'Paso ' + (i + 1) + "&nbsp;:&nbsp;" + str + '' +
													'</font></div><br/>';
									} else {
										obj.html = '<div style="height: 35px; padding-top: 15px; width: 300px; cursor:pointer;" ' +
													'onClick="manageStep(' + i + ')">' +
													'<img src="/agvWeb/ext/images/icons/fam/bullet_red.png" style="vertical-align:middle;"/>' +
														'<font style="font-size: 14px; text-decoration: underline; cursor: pointer;' +
														' padding-left:5px;">' +
														'Paso ' + (i + 1) + "&nbsp;:&nbsp;" + str + '' +
													'</font></div><br/>';
									}
									a.add(obj);
									a.doLayout();
								}
							}
						}
	            	},
					{
					    xtype: 'box',
				    	width: 4,
				    	style: 'padding: 15px;'
					},
				    {
				    	xtype: 'fieldset',
	            		width: 600,
				    	style: 'padding: 10px',
				    	layout: 'form',
				    	id:'paramForm',
				    	title: 'Captura de Parametros',
						defaultType: 'textfield',
						labelWidth: 150,
				    	items: []
				    }
				]
            }];

			Ext.Ajax.request({
				method: 'POST',
				waitMsg: 'cargando ...',
			   	url: '/agvWeb/admCat.do?method=getCatConfiguration',
				   success: function (response,conn){
						var responseData = Ext.util.JSON.decode(response.responseText);
						if(responseData.success){
							Ext.getCmp('stepsFs').isAnidate = responseData.data.isAnidate;
							Ext.getCmp('stepsFs').seqConf = responseData.data.seqConf;
							Ext.getCmp('stepsFs').stepsConf = responseData.steps;
							Ext.getCmp('cfgCatStep').setTitle(responseData.data.title);
							Ext.getCmp('stepsFs').setTitle('Pasos');
						} else {
					   		Ext.Msg.show({
					            			 	title:'agv software',
					            			 	msg: responseData.msg, 
					            			 	buttons: Ext.Msg.OK, 
					            			 	icon: 'silk-error' });
						}
				   },
			   params: { idCat:  document.getElementById('tpFunction').value}
			});

        
       		cfgCatalogViewUi.superclass.initComponent.call(this);

       		
			function clearForm(){
			}
			
    }

});

function manageStep(stepCounter){
	
	Ext.getCmp('stepsFs').removeAll();

	actualStep = stepCounter;
	
	var a = Ext.getCmp('stepsFs');


	for(var i = 0 ; i < a.stepsConf.length ; i ++){
		var str = a.stepsConf[i].nb_catalogo;
		var obj = new Object();
		if(i == stepCounter){
			obj.html = '<div style="height: 35px; padding-top: 15px; width: 300px;' +
					'background: url(\'/agvWeb/images/large_arrow.png\'); background-position: center; ' +
					'background-repeat: no-repeat;">' +
						'<img src="/agvWeb/ext/images/icons/fam/bullet_go.png" style="vertical-align:middle;"/>' +
							'<font style="font-size: 14px;' +
							' padding-left:5px;">' +
							'Paso ' + (i + 1) + "&nbsp;:&nbsp;" + str + '' +
						'</font></div><br/>';
		} else {
			obj.html = '<div style="height: 35px; padding-top: 15px; width: 300px; cursor:pointer;" ' +
						'onClick="manageStep(' + i + ')">' +
						'<img src="/agvWeb/ext/images/icons/fam/bullet_red.png" style="vertical-align:middle;"/>' +
							'<font style="font-size: 14px; text-decoration: underline; cursor: pointer;' +
							' padding-left:5px;">' +
							'Paso ' + (i + 1) + "&nbsp;:&nbsp;" + str + '' +
						'</font></div><br/>';
		}
		a.add(obj);
		a.doLayout();
	}
}

var actualStep = 0;

cfgCatalogView = Ext.extend(cfgCatalogViewUi, {
    initComponent: function(arguments) {
    	document.getElementById('tpFunction').value = this.tpFuncion;
        cfgCatalogView.superclass.initComponent.call(this);
    }
});


